<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <!-- 收获地址 -->
  <van-contact-card type="edit" :name="`${address.name} ${address.region_text}`" :tel="address.tel" v-if="address"
    @click="AddressSelect" />
  <van-contact-card type="add" v-else @click="AddressAdd" />

  <!-- 商品卡片 -->
  <van-card v-if="product" :title="product.name" :thumb="product.thumbs_text" @click-thumb="toProductInfo(product.id)">
    <template #title>
      <div class="title">{{ product.name }}</div>
    </template>

    <!-- 卡片的插槽部分 -->
    <template #desc v-if="attribute.length > 0">
      <van-tag v-for="(attr, index) in attribute" :key="index" class="tag" type="primary">{{ attr.value }} {{ attr.price
        > 0
        ? `￥${attr.price}` : '' }}</van-tag>
    </template>
    <template #desc v-else>
      <van-tag class="tag" type="danger">无规格数据</van-tag>
    </template>

    <template #tags>
      <div class="price">拼团价格：￥{{ product.buy }}</div>
    </template>
  </van-card>

  <van-cell title="支付方式" :value="PayActive.text" is-link @click="PayShow = true" />

  <!--订单备注 -->
  <van-field v-model="remark" rows="2" autosize label="订单备注" type="textarea" maxlength="120" placeholder="请输入订单备注"
    show-word-limit />


  <!-- 提交动作栏 -->
  <van-submit-bar text-align="left" :price="total" button-text="确认拼团" @submit="submit" />

  <!-- 支付方式的选择器 -->
  <van-popup v-model:show="PayShow" position="bottom">
    <van-picker title="选择支付方式" :columns="PayList" @cancel="PayShow = false" @confirm="PayConfirm" />
  </van-popup>

</template>

<script setup>
import { getCurrentInstance, ref, onBeforeMount, computed } from 'vue'

const { proxy } = getCurrentInstance()

// 获取商品ID 和 选择的规格
let proid = proxy.$route.query.pid ? proxy.$route.query.pid : 0
let relationids = proxy.$cookies.get('relationids') ? proxy.$cookies.get('relationids') : ''
let teamid = proxy.$cookies.get('teamid') ? proxy.$cookies.get('teamid') : 0

//响应式数据
let product = ref(null)
let address = ref(null)
let remark = ref('')
let attribute = ref([])

//支付方式
let PayShow = ref(false)
let PayActive = ref({ text: '余额支付', value: 'money' })
let PayList = ref([
  { text: '余额支付', value: 'money' },
  { text: '微信支付', value: 'wx' },
  { text: '支付宝', value: 'zfb' },
])


//生命周期
onBeforeMount(() => {
  ProInfo()
  AttrInfo()
  AddressInfo()
})

//合计的价格
let total = computed(() => {
  var team = 0

  if (product.value) {
    team = product.value.buy ? parseFloat(product.value.buy) : 0
  }

  if (attribute.value.length > 0) {
    attribute.value.map((item) => {
      team += parseFloat(item.price)
    })
  }

  return parseFloat(team * 100)
})

//商品数据
const ProInfo = async () => {
  //组装数据
  var params = {
    busid: proxy.$business.value.id,
    proid
  }

  var result = await proxy.$POST({
    url: '/product/info',
    params
  })

  if (result.code == 0) {
    proxy.$fail(result.msg)
    return false
  }

  product.value = result.data.product
}

//商品规格数据
const AttrInfo = async () => {
  //判断是否有规格的数据ID
  if (!relationids) return false

  var result = await proxy.$POST({
    url: '/product/attribute',
    params: { relationids }
  })

  if (result.code == 0) return false

  attribute.value = result.data
}

//返回收获地址的方法
const AddressInfo = async () => {

  //先判断cookie当中是否存在缓存,如果有缓存就拿缓存的数据，没有缓存就接口请求
  var cached = proxy.$cookies.get('address') ? proxy.$cookies.get('address') : null

  if (cached) {
    address.value = cached
  } else {
    var result = await proxy.$POST({
      url: '/address/selected',
      params: { busid: proxy.$business.value.id }
    })

    if (result.code == 0) {
      proxy.$fail(result.msg)
      return false
    }

    address.value = result.data
  }
}

//切换收获地址
const AddressSelect = () => {
  proxy.$router.push({ path: '/address/index', query: { action: 'select' } })
}

//添加收获地址
const AddressAdd = () => {
  proxy.$router.push('/address/add')
}

//跳转到商品详情界面
const toProductInfo = pid => proxy.$router.push({ path: '/product/info', query: { pid } })

//支付方式
const PayConfirm = ({ selectedOptions }) => {
  PayShow.value = false
  PayActive.value = selectedOptions[0]
}

//提交订单
const submit = async () => {
  //组装数据
  var params = {
    busid: proxy.$business.value.id,
    addrid: address.value.id,
    relationids: relationids,
    remark: remark.value,
    pay: PayActive.value.value,
    teamid: teamid,
    proid: proid
  }


  var result = await proxy.$POST({
    url: '/team/add',
    params
  })

  if (result.code == 0) {
    proxy.$fail(result.msg)
    return false
  }

  proxy.$success({
    message: result.msg,
    onClose: () => {
      // proxy.$router.push(result.url)
      proxy.$router.push('/business/index')
      return false
    }
  })
}
</script>


<style scoped>
:deep(.cart) {
  display: flex;
  width: 100%;
}

::v-deep .van-swipe-cell {
  width: 100%;
}

.delete-button {
  height: 100%;
}


.van-card {
  background-color: #fff;
}

.title {
  font-size: 16px;
  font-weight: bold;
}

.tag {
  margin-right: 5px;
}

.price {
  font-size: 14px;
  font-weight: bold;
}
</style>